{% extends 'base.html' %}

{% block title %}
	Area
{% endblock %}

{% block content %}
		<!-- entete -->
		<div data-role="header">
			<h1>Area</h1>
			<a href="/delinquancePage" data-icon="back">Back</a>
			<a href="../../" data-icon="home">Home</a>
		</div>
		
		<!-- contenu -->
		<div data-role="content"> 
			<div class="ui-grid-a">
				<div class="ui-block-a" >
				     <a href="/AreaPage" data-role="button" class="ui-btn-active">Area</a>
				</div>
				<div class="ui-block-b" >
				    <a href="/AreaSplinePage" data-role="button" >AreaSpLine</a>
				</div>
   			</div>
				
			<script type="text/javascript" src="/media/js/area.js"></script>
			
			<div class="ui-grid-a" style="width:100%">
				<div class="ui-block-a" id="graphTabArea" style="width:100%"></div>
			</div>
			<div data-role="collapsible" data-collapsed="true">
				<h1>Département</h1>
				<ul data-role="listview" id='listCheckboxArea' data-inset="true" data-filter="true" data-theme="c" data-dividertheme="b"></ul>
			</div>
		</div>
		
		<!-- footer -->
	<div data-role="footer">
	 <br>
	 <br>
	</div>
{% endblock %}
	